<template>
    <div class="bottombar">
      <div class="tuijian">
        <div class="title">
          <h3>热门</h3>
          <p>更多>></p>
        </div>
        <div class="cont">
          <div class="contItem" v-for="(item,index) in 30" :key="index">
            <div class="left">
              <img src="../../assets/67.jpg" alt="">
              <div class="bofang">
                <img src="../../assets/bofangVideo.png" alt="">
              </div>
              <div class="song">
                <p>我想多你说关于爱情的故事</p>
                <p>过耳难忘|最热音乐推荐</p>
              </div>
            </div>
            <div class="right">
              <el-button size="mini">热门视频</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
            
        };
    },
  }
  </script>
  <style lang="scss" scoped>
  .tuijian{
    width:calc(100vw - 230px);
    .title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid #ff0000;
    }
    .cont::-webkit-scrollbar {
      width: 0;
    }
    .cont{
      height:calc(100vh - 180px);
      overflow-y:auto;
      .contItem{
          display:flex;
          align-items:center;
          justify-content:space-between;
          border-bottom:1px solid #f0f0f0;
          .left{
            display:flex;
            align-items:center;
            position: relative;
            img{
              width:50px;
              height:50px;
            }
            .bofang{
              position:absolute;
              img{
                width:35px;
                margin:0 8px;
                height:35px;
              }
            }
            .song{
              margin-left:10px;
              line-height:20px;
              p{
                font-size:12px;
              }
              p:nth-child(2){
                margin-top:-10px;
              }
            }
          }
          .right{
            img{
              margin:0 10px;
              width:20px;
              height:20px;
            }
          }
        }
    }
  }
  </style>
  